<template>
  <div id="modify-avatar">
    <div class="avatar-contain">
      <div v-for="size in sizeList"
           :key="size">
        <avatar :avatarDiameter="size"></avatar>
        <div class="avatar-desc">{{size}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Avatar from '@/components/Avatar'
export default {
  name: 'ModifyAvatar',
  data () {
    return {
      sizeList: ['72px', '108px', '144px']
    }
  },
  components: {
    Avatar
  }
}
</script>

<style lang="stylus" scoped>
.avatar-contain
  display flex
  justify-content space-around
  align-items flex-end
  .avatar-desc
    margin-top 10px
    font-size 18px
    font-weight 600
    text-align center
</style>
